<template>
    <div class="box">
        <h3>axios的模块化定义</h3>
        <ol>
            <li>将共用的axios功能代码以独立JS文件形式进行描述，并采用模块化语法完成功能导出</li>
            <li>在需要使用封装axios进行异步请求的位置，通过加装封装模块完成异步方法执行</li>
            <li>axios的封装操作一般会完成二次封装定义：基于封装的axios再次构建地址的统一管理模块</li>
            <li>组件内只用加装的二次封装模块完成对应方法调用即可实现异步请求操作</li>
        </ol>
        <pre>{{ types }}</pre>
        <input type="button" value="initTypesData1()" @click="initTypesData1()">
        <input type="button" value="initTypesData2()" @click="initTypesData2()">
        <hr>
        <p>电影项目-首页数据请求处理</p>
        <pre>{{ result }}</pre>
        <input type="button" value="loadHomeData()" @click="loadHomeData()">
    </div>
</template>

<script>
import api from "@/index/api";
// import { loadTypes,loadFilms } from "@/index/api";

export default {
    data() {
        return {
            types:[],
            result:[]
        }
    },
    methods: {
        initTypesData1() {
            api.loadTypes()
                .then(( data )=>{
                    this.types = data.data;
                })
        },
        async initTypesData2() {
            let { data } = await api.loadTypes();
            this.types = data;
        },
        async loadHomeData(){
            let { data } = await api.loadTypes();
            for (let t of data) {
                let res = await api.loadFilms({
                    tid:t.typeId,
                    pageSize:1
                });
                t.list = res.data;
            }
            this.result = data;
        }
    },
}
</script>

<style lang="scss" scoped>

</style>